import React from 'react'
import StatCard from "../StatCard/StatCard";

const StatsList = props => {

    const {
        stats
    } = props

    const defaultStats = [
        {home: 0, away: 0, type: 2},
        {home: 0, away: 0, type: 3},
        {home: 0, away: 0, type: 4},
        {home: 0, away: 0, type: 8},
        {home: 0, away: 0, type: 21},
        {home: 0, away: 0, type: 22},
        {home: 0, away: 0, type: 23},
        {home: 0, away: 0, type: 24},
        {home: 0, away: 0, type: 25},
    ]


    const template = (
        <div
            className='flex game-room-live-card'
            style={{
                flexWrap: 'wrap',
                position: 'relative',
            }}
        >
            <div
                style={{
                    height: '1px',
                    backgroundColor: '#f5f5f9',
                    width: '100%',
                    position: 'absolute',
                    top: '50%',
                }}
            />
            {stats.length === 0
                ? defaultStats.map((stat, index) => <StatCard stat={stat} key={index}/>)
                : stats.map((stat, index) => <StatCard stat={stat} key={index}/>)
            }
        </div>
    )

    return template

}
export default StatsList
